<template>
    <div>

    <h1>{{ unmae }}</h1>
    <h1>{{ role }}</h1>

     <el-button v-on:click="loginout()" type="primary">登出</el-button>
   
     
     
     订单时间
    <el-date-picker
      v-model="vo.begindt"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
    ~
    <el-date-picker
      v-model="vo.enddt"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
    服务区域：
    <el-select v-model="vo.areaid" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
    运营商
   <el-select v-model="vo.service" placeholder="请选择">
    <el-option
      v-for="item in optionsYYS"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  订单状态
  <el-select v-model="vo.status" placeholder="请选择">
    <el-option
      v-for="item in optionsDdzt"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  服务方
  <el-input v-model="vo.comanyname" placeholder="请输入服务方" style="width: 400px"></el-input>
  订单id<el-input v-model="vo.ordernum" placeholder="请输入订单ID" style="width: 400px"></el-input>
  客户电话<el-input v-model="vo.remark" placeholder="请输入客户电话" style="width: 400px"></el-input>
  服务名称<el-input v-model="vo.servicename" placeholder="请输入服务名称" style="width: 400px"></el-input>
    
    <el-button v-on:click="search()" type="primary">查询</el-button>
    <el-button v-on:click="deleteall" type="primary">批量删除</el-button>
    <el-button v-on:click="add()" type="primary">新加</el-button>
    <el-button v-on:click="tongji()" type="primary">统计</el-button>



<el-table
    :data="tableData"
    border
    style="width: 100%">

    <el-table-column
      fixed
      prop="id"
      label="主键"
      width="150">
    </el-table-column>


    <el-table-column
      fixed
      prop="ordernum"
      label="订单号码"
      width="150">
    </el-table-column>
    
    
    <el-table-column
      fixed
      prop="ordername"
      label="订单名称"
      width="150">
    </el-table-column>
    
    <el-table-column
      prop="orderdt"
      label="订单日期"
      width="120">
    </el-table-column>
    <el-table-column
      prop="areaid"
      label="服务区域"
      width="120">
    </el-table-column>

    <el-table-column
      prop="comanyname"
      label="服务公司名"
      width="120">
    </el-table-column>

      <el-table-column
            prop="service"
            label="服务商"
            width="120">
          </el-table-column>

      <el-table-column
            prop="status"
            label="状态"
            width="120">
          </el-table-column>

      <el-table-column
            prop="ordermoney"
            label="服务价格"
            width="120">
          </el-table-column>

      <el-table-column
            prop="servicename"
            label="服务名称"
            width="120">
          </el-table-column>

      <el-table-column
            prop="remark"
            label="手机号码"
            width="120">
          </el-table-column>

      <el-table-column
            prop="acceptname"
            label="接单人"
            width="120">
          </el-table-column>

    <el-table-column
            prop="addcepdt"
            label="接单时间"
            width="120">
          </el-table-column>

          
      <el-table-column
            prop="rejectname"
            label="弃单人"
            width="120">
          </el-table-column>

    <el-table-column
            prop="rejectdt"
            label="弃单时间"
            width="120">
          </el-table-column>

    <el-table-column
            prop="createname"
            label="订单创建人"
            width="120">
          </el-table-column>






    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">

        <div v-show="showsrole">
          <el-button @click="handleUpdate(scope.row)" type="text" size="small">修改</el-button>
        </div>
        
        <div v-show="nshowsrole">
          <el-button @click="handleClickzz(scope.row)" type="text" size="small">接单</el-button>
          <el-button @click="handleClickcq(scope.row)" type="text" size="small">弃单</el-button>
          <el-button @click="handleClickqc(scope.row)" type="text" size="small">完成</el-button>
          
        </div>
         
        

      </template>
    </el-table-column>
  </el-table>


<div class="block">
  <el-pagination
    layout="prev, pager, next"
    :current-page="currentpage"
    :page-size="pagesize"
    :total="totalsize"
    @current-change="search"
    >
  </el-pagination>
</div>


<el-dialog title="新加" :visible.sync="dialogFormVisible" width="40%">
    <el-form :model="form" :rules="rules" ref="form">
    
    <el-form-item label="id" :label-width="formLabelWidth">
      <el-input v-model="form.id" autocomplete="off" disabled="true" style="width: 400px"></el-input>
    </el-form-item>
    
    <el-form-item label="订单号码" :label-width="formLabelWidth" prop="ordernum">
      <el-input v-model="form.ordernum"    autocomplete="off" style="width: 400px"></el-input>
    </el-form-item>

   <el-form-item label="订单名称" :label-width="formLabelWidth"  prop="ordername">
      <el-input v-model="form.ordername" autocomplete="off" style="width: 400px"></el-input>
    </el-form-item>
       
   <el-form-item label="订单日期" :label-width="formLabelWidth"  prop="orderdt">
    <el-date-picker
      v-model="form.orderdt"
      type="datetime"
      placeholder="选择日期时间">
    </el-date-picker>
       </el-form-item>
    

      <el-form-item label="服务区域" :label-width="formLabelWidth">
       {{  this.$store.state.area  }}
       <el-button type="primary" v-on:click="searchaiea" icon="el-icon-search">搜索</el-button>

      </el-form-item>

      <el-form-item label="服务公司名" :label-width="formLabelWidth"  prop="comanyname">
      <el-input v-model="form.comanyname" autocomplete="off" style="width: 400px"></el-input>
    </el-form-item>

  <el-form-item label="服务商" :label-width="formLabelWidth"  prop="service">
  <el-select v-model="form.service" placeholder="请选择">
    <el-option
      v-for="item in optionsYYS"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

    </el-form-item>
    
      <el-form-item label="服务价格" :label-width="formLabelWidth"  prop="ordermoney">
      <el-input v-model="form.ordermoney" autocomplete="off" style="width: 400px"></el-input>
    </el-form-item>
       <el-form-item label="服务名称" :label-width="formLabelWidth"  prop="servicename">
      <el-input v-model="form.servicename" autocomplete="off" style="width: 400px"></el-input>
    </el-form-item>
   <el-form-item label="电话号码" :label-width="formLabelWidth"  prop="remark">
      <el-input v-model="form.remark" autocomplete="off" style="width: 400px"></el-input>
    </el-form-item>


    
    </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveKh">确 定</el-button>
  </div>
</el-dialog>



<el-dialog title="选择区域" :visible.sync="dialogTableVisibleQy">

名称<el-input v-model="vo.areaid" placeholder="请输入名称" style="width: 400px"></el-input>
    
    <el-button v-on:click="searchQy" type="primary">查询</el-button>


  <el-table :data="gridDataArea">
    <el-table-column property="id" label="主键" width="150"></el-table-column>
    <el-table-column property="areaname" label="区域" width="150"></el-table-column>
    
     <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
   
          <el-button @click="saveQyarea(scope.row)" type="text" size="small">返回</el-button>
       
         
        

      </template>
    </el-table-column>

  
  </el-table>

<div class="block">
  <el-pagination
    layout="prev, pager, next"
    :current-page="currentpage"
    :page-size="pagesize"
    :total="totalsize"
    @current-change="searchQy"
    >
  </el-pagination>

</div>

</el-dialog>





<el-dialog title="按照状态统计数量" :visible.sync="dialogTableVisibleYhls">

  <el-table :data="gridData">
    <el-table-column property="name" label="状态" width="150"></el-table-column>
    <el-table-column property="px" label="数量" width="150"></el-table-column>
    
  
  </el-table>
</el-dialog>




    </div>
</template>


<script>
import axios from 'axios';
import About from './About.vue'
export default {

   computed:{
      unmae () {
      return this.$store.state.userInfo.username
    }
    ,
    role(){
      if(this.unmae == "admin"){
        return true 
      }
      else{
        return false 
      }
    }
   },

   //页面初始化 将来从后端吧数据传递过来
   created() {

     this.search();
     this.searchSum();
     //调用查询所有的区域的数据
     this.searchQy();

   },

    methods: {

      loginout(){
        
      axios.post("http://localhost:8089/user/mylogout")
        .then(res=>{
          //先关闭开户的小窗口，再刷新一次
        
          this.search();
        })  


      },
      //把选择的区域放入共享变量 
      saveQyarea(row){
        //传递过来的区域值
        let areaid =  row.id ;
        //通过vuex 吧数据保存到共享变量
        this.$store.commit('setarea', areaid);
        this.form.areaid = this.$store.area ;
        this.dialogTableVisibleQy = false ;

      },

      tongji(){
       this.dialogTableVisibleYhls = true ;
  
      },
      handleUpdate(row){
        let isedidt =   row.status ;

       
       if(isedidt =='0'){
        
        this.dialogFormVisible = true ;
      
        //吧数据传递过去
        this.form = row ;
       }
       else{
         alert("如果订单状态不为刚开始新加待确定，不能修改！");
       }


      }
      ,
      searchaiea(){

          this.dialogTableVisibleQy = true ;
      },
      
      //存取钱保存的逻辑
      saveCqq(){
      
     
      axios.post("http://localhost:8089/account/adddetailnew",this.form)
        .then(res=>{
          //先关闭开户的小窗口，再刷新一次
        
          this.search();
        })  
        
      


      },
      saveZzhang(){
      alert("接单") ;
       
      axios.post("http://localhost:8089/account/addZqnew"+this.$store.state.userInfo.username)
        .then(res=>{
          //先关闭开户的小窗口，再刷新一次
       
          this.search();
        })  
       
      
      },
      saveKh(){
       
              
            this.form.createname = this.$store.state.userInfo.username ;
            this.form.areaid =this.$store.state.area ;
        if (this.form.id != null) {
          //更新
          axios.put("http://localhost:8089/torder/updateOrder",this.form)
          .then(res=>{
            //先关闭开户的小窗口，再刷新一次
            this.dialogFormVisible = false ;
            this.search();
          })
      

      } else {
        //新加
         this.form.state ="0" ;
          axios.post("http://localhost:8089/torder/addOrder",this.form)
          .then(res=>{
            //先关闭开户的小窗口，再刷新一次
            this.dialogFormVisible = false ;
            this.search();
          })
          
      }



       
       
     
     
      },
      changepager(){

        alert("99");
      },

      
        searchSum(){
          axios.post('http://localhost:8089/torder/searchDetail')
          .then(res=>{
            this.gridData =  res.data.data;
        
          })


        }
        ,
        searchQy(cp=1){
          // 进行权限初始化
           this.currentpage = cp;
          axios.post('http://localhost:8089/torder/searchare/'+this.currentpage+"/" +this.pagesize,this.vo)
          .then(res=>{
            this.gridDataArea =  res.data.rows;
            this.totalsize = res.data.total;

          })


        },

       search(cp=1){
          // 进行权限初始化
           let bshow = this.$store.state.userInfo.role  ;
           alert(bshow);
           this.showsrole = bshow ;
           this.nshowsrole = !bshow ;

           this.currentpage = cp;

                                                                                                    
          axios.post('http://localhost:8089/torder/search/'+this.currentpage+"/" +this.pagesize+"/" + this.$store.state.userInfo.username,this.vo)
          .then(res=>{
            this.tableData =  res.data.rows;
            this.totalsize = res.data.total;
        })
        },
        add(){
            this.dialogFormVisible = true ;
            this.form.id ='' ;




        },
        handleClickzz(row){
          //说明 ，接单讲主键与接单人更新到订单表中
          let useid = row.id ;
          axios.post('http://localhost:8089/torder/updateJiedan/'+this.$store.state.userInfo.username+"/" +useid)
          .then(res=>{
            //接单后接单人发生变化 刷新
             this.search();
          })
          
       

        },
        handleClickcq(row){
        
          
           //说明 ，接单讲主键与接单人更新到订单表中
          let useid = row.id ;
          
          axios.post('http://localhost:8089/torder/updateqiedan/'+this.$store.state.userInfo.username+"/" +useid)
          .then(res=>{
            //接单后接单人发生变化 刷新
             this.search();
          })
          
       

          },
        handleClickqc(row){
          
           //说明 ，接单讲主键与接单人更新到订单表中
          let useid = row.id ;
        
          axios.post('http://localhost:8089/torder/updateWanchengdan/'+this.$store.state.userInfo.username+"/" +useid)
          .then(res=>{
            //接单后接单人发生变化 刷新
             this.search();
          })
          

          },
       

    },

    components: {
        About,
    },
     //数据初始化
    data() {
    return {

      rules: {
          ordernum: [
            { required: true, message: '请输入订单号码', trigger: 'blur' },
          ],
          ordername: [
            { required: true, message: '请选择订单名称', trigger: 'change' }
          ],
          orderdt: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
       
          service: [
            { required: true, message: '请至少选择一个服务商', trigger: 'change' }
          ],

          areaid: [
            { required: true, message: '请选择服务区域', trigger: 'change' }
          ],

          ordermoney: [
                      { required: true, message: '请选择服务价格', trigger: 'change' }
                    ],

          servicename: [
                      { required: true, message: '请选择服务名称', trigger: 'change' }
                    ],

          remark: [
                      { required: true, message: '请选择电话号码', trigger: 'change' }
                    ],

          areaid: [
                      { required: true, message: '请选择服务区域', trigger: 'change' }
                    ],


          comanyname: [
            { required: true, message: '请填写服务公司名', trigger: 'blur' }
          ]
        }
        ,
      // 查询的初始化开始
       options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
         optionsYYS: [{
          value: '1',
          label: '中国联通'
        }, {
          value: '2',
          label: '中国电信'
        }, {
          value: '3',
          label: '中国移动'
        }],

        optionsDdzt: [{
          value: '0',
          label: '待接收'
        }, {
          value: '1',
          label: '进行中'
        }, {
          value: '2',
          label: '已完成'
        }],
        vo:{},
        //查询的舒适化结束

        gridData: [],
        gridDataArea:[],

        dialogTableVisibleQy:false,
      dialogFormVisible:false,
   
      dialogTableVisibleYhls:false,
      currentpage:1,
      pagesize:2,
      totalsize:100,
      vo:{},
      tableData:[],
      enabled:true, //给定一个初始化值为false 
    form: {
          username: '',
          accountid: '',
          createdt: ''
        },

      input: ''
    }
  }
    



}
</script>